<template>
  <div class="app-container">
    <upload-excel-component :on-success="handleSuccess" :before-upload="beforeUpload" />
    <el-table :data="tableData" border highlight-current-row style="width: 100%;margin-top:20px;">
      <el-table-column v-for="item of tableHeader" :key="item" :prop="item" :label="item" />
    </el-table>
  </div>
</template>

<script>
import UploadExcelComponent from '@/components/UploadExcel/index.vue'
// 导入excel数据接口
 import { importEmployee } from '@/api/employees'
//  导入excel转换时间的包
 import { formatExcelDate } from "@/utils";
export default {
  name: 'UploadExcel',
  components: { UploadExcelComponent },
  data() {
    return {
      tableData: [],
      tableHeader: []
    }
  },
  methods: {
    // 本地文件上传之前的回调函数
    beforeUpload(file) {
        // 读取出来的数据的单位是bytes (字节)
        // 1mb=1024kb   1kb=1024bytes   一个英文等于1bytes   一个汉字2-6个字节
      const isLt1M = file.size / 1024 / 1024 < 1

      if (isLt1M) {
        return true
      }

      this.$message({
        message: 'Please do not upload files larger than 1m in size.',
        type: 'warning'
      })
      return false
    },
    handleSuccess({ results, header }) {
        // 1,  将本地文件的数据读取出来转换为js数据
        // 2,  将js数据进行格式化
        // 3,  发送请求携带格式化好的数据到后台服务器
      this.tableData = results
      this.tableHeader = header
      console.log('results',results);
      console.log('header',header);
    //   调用格式化函数 传入参数数 转换成为英文的key
      const data = this.dataFormat(results)
    //   调用批量导入数据函数
    this.doAdd(data)
      console.log('data',data);

    },
    // 批量导入数据
    async doAdd(data){
   
      try {
        const res = await importEmployee(data)
        console.log('importEmployee', res)
        //导入成功后,返回之前的页面
        this.$router.back()
      } catch (err) {
        console.log('importEmployee', err)
      }
    },
    // 定义一个转换函数(把对象的中文key转换为英文key)
     dataFormat(data){  //将data中的数据的key改为指定的英文

            // 1. 映射对象，根据映射对象找英文的键
            const mapInfo = {
                '入职日期': 'timeOfEntry',
                '手机号': 'mobile',
                '姓名': 'username',
                '转正日期': 'correctionTime',
                '工号': 'workNumber',
                '部门': 'departmentName',
                '聘用形式': 'formOfEmployment'
            }
             // 2变量数据取出一个个的对象,获取到中文的key
            // 利用map函数  获取一个个对象,(因为map最终得到的是一个数组对象)
            
            const result=data.map(zhobj=>{   //这里的zhobj  是代表中文的对象  就是随便起的名字 相当于item
                const enObj={}   //先定义一个英文的obj对象  用来保存下面 一会转换成功的英文对象
                // 定义一个zhkeys保存 中文的keys   
                const zhkeys=Object.keys(zhobj)  
                console.log(zhkeys)  //['入职日期','姓名','工号','手机号']
                zhkeys.forEach(zhkey=>{
                    // 把得到新的对象元素,放到mapInfo 函数中转换成英文的对象
                    // console.log(mapInfo[zhkey],'mapInfo[zhkey]');
                    const enkey=mapInfo[zhkey]
                    if(enkey==='timeOfEntry'||enkey==='correctionTime'){
                        console.log(zhobj[zhkey],'zhObj[zhkey]');
                     enObj[enkey]=new Date(formatExcelDate(zhobj[zhkey]))   
                    }else{
                        enObj[enkey]=zhobj[zhkey]
                    }
                  
                })
                return  enObj  //返回新得到的英文对象的key给 data.map 这个函数  得到新的数组    并保存在result中
            })
            console.log('result',result);
            return result

        }
  }
}
</script>
